<!DOCTYPE HTML>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>jq分页</title>
	<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
	<style type="text/css">
		div,ul,li,body {
			margin: 0;
			padding: 0;
			font-size: 12px;
		}
		ul,li {
			list-style: none
		}
		.box {
			width: 500px;
			height: auto;
			margin: 100px auto;
			text-align: center;
		}
		#content {
			background: #5B76CF
		}
		#content li {
			line-height: 24px;
			color: #fff
		}
		#pageNum {
			display: inline-block;
		}
		#prev {
			cursor: pointer;
			background: #f00;
			color: #fff;
			width: 50px;
			height: 30px;
			display: inline-block;
			text-align: center;
			line-height: 30px;
		}
		#next {
			cursor: pointer;
			background: #f00;
			color: #fff;
			width: 50px;
			height: 30px;
			display: inline-block;
			text-align: center;
			line-height: 30px;
		}
		.page {
			margin-top: 20px
		}
		#pageNum li {
			display: inline-block;
			width: 30px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			cursor: pointer;
		}
		#pageNum li.active {
			background: #f00;
			color: #fff
		}
		#pageNum li:hover {
			background: #f00;
			color: #fff
		}
	</style>
</head>

<body>
	<div id="containet" class="box">
		<ul id="content">
			<li>web前端开发实习课程，第1条</li>
			<li>web前端开发实习课程，第2条</li>
			<li>web前端开发实习课程，第3条</li>
			<li>web前端开发实习课程，第4条</li>
			<li>web前端开发实习课程，第5条</li>
			<li>web前端开发实习课程，第6条</li>
			<li>web前端开发实习课程，第7条</li>
			<li>web前端开发实习课程，第8条</li>
			<li>web前端开发实习课程，第9条</li>
			<li>web前端开发实习课程，第10条</li>
			<li>web前端开发实习课程，第11条</li>
			<li>web前端开发实习课程，第12条</li>
			<li>web前端开发实习课程，第13条</li>
			<li>web前端开发实习课程，第14条</li>
			<li>web前端开发实习课程，第15条</li>
			<li>web前端开发实习课程，第16条</li>
			<li>web前端开发实习课程，第17条</li>
			<li>web前端开发实习课程，第18条</li>
			<li>web前端开发实习课程，第19条</li>
			<li>web前端开发实习课程，第20条</li>
			<li>web前端开发实习课程，第21条</li>
			<li>web前端开发实习课程，第22条</li>
			<li>web前端开发实习课程，第23条</li>
			<li>web前端开发实习课程，第24条</li>
			<li>web前端开发实习课程，第25条</li>
			<li>web前端开发实习课程，第26条</li>
			<li>web前端开发实习课程，第27条</li>
			<li>web前端开发实习课程，第28条</li>
			<li>web前端开发实习课程，第29条</li>
			<li>web前端开发实习课程，第30条</li>
		</ul>
		<div class="page">
			<span id="prev">上一页</span>
			<ul id="pageNum"></ul>
			<span id="next">下一页</span>
		</div>
	</div>
</body>
<script>
	$(function () {
		tabPage();
	})
	function tabPage() {
		var contentNum = $("#content").children();//获取显示数据
		//console.log(content.length)
		var pagePrev = $("#prev");//上一页
		var pageNext = $("#next"); //下一页
		var Num = 6;//每页显示的数量
		var numPage = $("#pageNum");
		var pageNum = Math.ceil(contentNum.length / Num);//多少页  math.ceil(x)返回大于参数x的最小整数,即对浮点数向上取整
		var liNum = "";
		var iNum = 0;
		for (var i = 0; i < pageNum; i++) {//添加五个1-5数字的分页按钮
			liNum += "<li>" + (i + 1) + "</li>"
		}
		numPage.html(liNum);
		numPage.children().eq(0).addClass("active");//第一页添加高亮显示
		//遍历页码实现点击
		numPage.children().each(function (index, items) {
			$(items).on("click", function () {
				$(this).addClass("active").siblings().removeClass("active");
				iNum = $(this).index();//当前点击的索引
				init(iNum)
			})
		})
		// 下一页
		pageNext.on("click", function () {
			if (iNum == pageNum - 1) {
				alert("已经是最后一页了~~");
				return false;
			}
			iNum++;
			numPage.children().eq(iNum).addClass("active").siblings().removeClass("active");//给每一页添加高亮显示
			init(iNum);
		})
		// 上一页
		pagePrev.on("click", function () {
			if (iNum == 0) {
				alert("当前是第一页~~");
				return false;
			}
			iNum--;
			numPage.children().eq(iNum).addClass("active").siblings().removeClass("active");//给每一页添加高亮显示
			init(iNum);
		})
		function init(iNum) {//第一次进入页面显示前六条数据
			contentNum.each(function (index, value) {
				$(value).hide();
			})
			for (var j = 0; j < Num; j++) {
				$(contentNum[Num * iNum + j]).css({ "display": "block" })
			}
		}

		init(iNum)
	}

</script>

</html>